<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.1.1/dist/echarts-gl.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/maptalks@0.39.3/dist/maptalks.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script> -->
    <!-- <script src="https://deyihu.github.io/src/lib/echarts-gl.1.1.3.js?tdsourcetag=s_pctim_aiomsg"></script> -->
    <script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/r14/Tween.js"></script>
    <style>
        body,
        html,
        #main {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <script>
        // 初始化echarts
            var myChart = echarts.init(document.getElementById('main'));

        $.getJSON('jiningbuildings.json', function (buildingsGeoJSON) {
        // $.getJSON('/assets/data-1524056463493-H1PcbpN2z.json', function (buildingsGeoJSON) {
            // var builds = buildingsGeoJSON.map(function (feature) {
            var builds = buildingsGeoJSON.features.map(function (feature) {
                return {
                    "type": "Feature",
                    "properties": {
                        "name": Math.random().toString(),
                        "height": feature.properties.height || 100
                        // "height": feature.height || 100
                    },
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": feature.geometry.coordinates[0]
                        // "coordinates": [feature.polygon]
                    }
                }
            })

            var regionsData = builds.map(function (feature) {
                return {
                    name: feature.properties.name,
                    value: Math.random() * 1,
                    height: feature.properties.height,
                    coords: feature.geometry.coordinates
                };
            });
            var __mapcenter__ = [116.582, 35.415];
            $.getJSON('/assets/road14.json', function (linesData) {
                var data = linesData.features;
                var hStep = 300 / (data.length - 1);
                var taxiRoutes = [];
                var i = 0;
                console.log(data)
                for (var x in data) {
                    var lnglats = data[x].geometry.coordinates[0]
                    taxiRoutes.push({
                        coords: lnglats,
                        lineStyle: {
                            color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * x))

                        },
                        value: Math.random() * 200
                    })
                }

                myChart.setOption({
                    maptalks3D: {
                        center: __mapcenter__,
                        zoom: 16,
                        pitch: 55,
                        urlTemplate: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=067998e486ea7ea61c91442ec719e8b3",//'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                        // altitudeScale: 1,
                        postEffect: {
                            enable: true,
                            FXAA: {
                                enable: true
                            }
                        },
                        light: {
                            main: {
                                intensity: 1,
                                shadow: true,
                                shadowQuality: 'high'
                            },
                            ambient: {
                                intensity: 0.
                            },
                            ambientCubemap: {
                                texture: '/assets/data-1491838644249-ry33I7YTe.hdr',
                                exposure: 1,
                                diffuseIntensity: 0.5,
                                specularIntensity: 2
                            }
                        }
                    },
                    series: [
                        {
                        type: 'polygons3D',
                        coordinateSystem: 'maptalks3D',
                        // map: 'buildings',
                        data: regionsData,
                        shading: 'realistic',
                        silent: true,
                        instancing: true,
                        realisticMaterial: {
                            metalness: 1,
                            roughness: 0.4,
                            // textureTiling: 200,
                            // detailTexture: '/asset/get/s/data-1528097075999-B13VYDfxm.jpg'
                        }
                    },
                    // {
                    //     type: 'lines3D',
                    //     coordinateSystem: 'maptalks3D',
                    //     effect: {
                    //         show: true,
                    //         constantSpeed: 1,
                    //         trailWidth: 3,
                    //         trailLength: 1,
                    //         trailOpacity: 1,
                    //         spotIntensity: 10
                    //     },
                    //     blendMode: 'lighter',
                    //     polyline: true,
                    //     data: taxiRoutes
                    // }
                    ]
                });

                var maptalksIns = myChart.getModel().getComponent('maptalks3D').getMaptalks();
                maptalksIns.on('click', function (e) {
                    console.log(e)
                });

            });
        });
    </script>
</body>

</html>